<template>
  <div class="count">
    <!-- 减 -->
    <div class="decrement" @click.stop="decrement" v-if="food.count>0">
      <i class="fa fa-minus"></i>
    </div>
    <!-- 数量 -->
    <div class="number" v-if="food.count>0">{{data.count}}</div>
    <!-- 加 -->
    <div class="increment" @click.stop="increment">
      <i class="fa fa-plus-circle"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCount',
  props: {
    data: Object
  },
  computed: {
    food() {
      return this.data
    }
  },
  methods: {
    decrement() {
      this.food.count--
    },
    increment() {
      this.food.count++
    }
  }
}
</script>

<style scoped lang="less">
.count {
  display: flex;
  align-items: center;
  .decrement {
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-right: 8px;
    border: 1px solid rgb(35, 149, 255);
    border-radius: 50%;
    text-align: center;
    i {
      display: flex;
      justify-content: center;
      font-size: 10px;
      color: rgb(35, 149, 255);
      border-radius: 50%;
    }
  }
  .number {
    color: skyblue;
    margin: 0 8px;
  }
  .increment {
    display: flex;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    i {
      font-size: 18px;
      color: rgb(35, 149, 255);
    }
  }
}
</style>
